+partial('logformat')
    .ui.relaxed.divided.list
        +each('todoLog')
            .item
                i.large.middle.aligned.edit.icon
                .content 
                    a.header {{ unixToReadable(.timestamp) }}
                    .description.
                        "{{ .action }}" action taken with id {{ .targetId }} 
                        on {{ unixToReadable(.timestamp) }}


anchor todo
.ui.segments
    h3.ui.top.attached.block.header todo #[a(href="#todo") #[i.linkify.icon]]
    .ui.attached.segment
        pre todo(checklist="\{{ list }}" log="\{{ log }}" on-statechange="statechanged" on-completion="completed" on-timeout="timedout")

    h3.ui.attached.block.header Example
    .ui.attached.segment
        checkbox(checked="{{ todo.show }}") Show/hide todo Bound component1

        +if('todo.show')
            .ui.equal.width.stackable.grid
                .column 
                    todo(
                        checklist="{{ todo.todos1 }}"
                        log="{{ todos.log1 }}"
                        on-statechange="todostatechanged"
                        on-completion="todocompletion"
                        on-timeout="todotimeout"
                        title="todo 1"
                        )

                .column 
                    h3.ui.block.header Logs for todo1
                    | {{>logformat {todoLog: todos.log1}}}
    
    h3.ui.attached.block.header Independent Instances 
    .ui.attached.segment
        .ui.equal.width.stackable.grid
            .row
                .column 
                    todo(
                        checklist="{{ todo.todos1 }}"
                        log="{{ todos.log1 }}"
                        on-statechange="todostatechanged"
                        on-completion="todocompletion"
                        on-timeout="todotimeout"
                        title="todo 1"
                        )
                .column
                    h3.ui.block.header Logs for todo1 
                    | {{>logformat {todoLog: todos.log1}}}

            .row
                .column 
                    todo(
                        checklist="{{ todo.todos2 }}"
                        log="{{ todos.log2 }}"
                        on-statechange="todostatechanged2"
                        on-completion="todocompletion2"
                        on-timeout="todotimeout2"
                        title="todo 2"
                        )
                .column
                    h3.ui.block.header Logs for todo2
                    | {{>logformat {todoLog: todos.log2}}}
                    
